<template>
  <el-dialog :model-value="dialogVisible" :title="title" width="1200px" :before-close="handleClose" append-to-body>
    <div class="detail-form_main" v-loading="loadingPage">
      <micro-app v-if="dialogVisible && formId" :app-name="fsscDesignerWeb.name" :entry="fsscDesignerWeb.entry"
          component-name="PcSubmitForm" :state-data="submitMicroAppProps" style="min-height: 450px;"/>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit()" v-loading="loading">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import api from '@/api'
import { onBeforeUnmount, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { statusText } from '@/util/index'
import { TEMPLATE_CONFIG, STATUS_LIST, BUDGET_TYPE_LIST, TIME_WEEK_LIST, WEEK_LIST, ROLL_ENABLED_LIST, CTROL_METHOD_LIST } from './config'
import { fsscDesignerWeb } from '@/micro/index.js'
import MicroApp from '@/micro/components/LoadMicroApp.vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['on-update', 'handleClose'])

const isShow = ref(true)

const formId = ref('')

const title = ref('')

// 子应用暴露出的
let microExposeInstance = null
// 提交表单，传递给子应用的实例
const submitMicroAppProps = ref({
  formId: '',
  formData: {},
  otherData: {
    showCopy: false,
  },
  expose: function(exposeIns) {
    microExposeInstance = exposeIns
  }
})

const loading = ref(false)

const loadingPage = ref(false)

// 关闭
const handleClose = () => {
  emit('handleClose')
}
// 填报接口
const writeFormHandle = (data) => {
  api.budgetConfig.budgetWriteForm(data).then(() => {
    loading.value = false
    submitAudit()
  })
    .catch(() => {
      loading.value = false
    })
}

const submit = () => {
  microExposeInstance.outValidateData((data) => {
    let params = {
      formData: data.formData,
      writeFormId: formId.value
    }
    loading.value = true
    writeFormHandle(params)
  })
}
const submitAudit = () => {
  api.budgetConfig.budgetSubmitAudit(props.id).then(() => {
    ElMessage.success('操作成功!')
    loading.value = false
    emit('on-update')
    handleClose()
  })
    .catch(() => {
      loading.value = false
    })
}

//组装回填数据
const assembleData = (dataObj) => {

  let result = {
    controlType: dataObj.controlBy,// 控制方式
    controlType__label: statusText(CTROL_METHOD_LIST, dataObj.controlBy),
    attachFile: [{ name: dataObj.fileTemplateVO.fileName, url: dataObj.fileTemplateVO.url }],
    occupyBudget: dataObj.budgetCategoryName, // 占用预算
    totalBudgetAmount: dataObj.totalAmount, // 预算费用总额
    budgetCarryForward: dataObj.budgetRollEnabled ? '1' : '0',//预算结转
    budgetCarryForward__label: statusText(ROLL_ENABLED_LIST, dataObj.budgetRollEnabled),
    controlCycle: dataObj.cycleType,//控制周期
    controlCycle__label: statusText([...WEEK_LIST, ...TIME_WEEK_LIST], dataObj.cycleType),
    planYear: dataObj.years,
    budgetId: props.id

  }
  return result

}

const setForm = async (formId, formData) => {
  loadingPage.value = false
  submitMicroAppProps.value.formId = formId
  submitMicroAppProps.value.formData = formData
}

onMounted(() => {
  getDetail()
})

const getDetail = () => {
  loadingPage.value = true
  api.budgetConfig.budgetQueryDetail(props.id).then(res => {
    console.log(res)
    title.value = res.budgetName

    api.budgetConfig.budgetFormDetail(res.writeFormCode).then(rex => {
      console.log(rex)
      formId.value = rex.id
      setForm(rex.id, assembleData(res))
    }).catch(err => {
      loadingPage.value = false
    })
  }).catch(err => {
    loadingPage.value = false
  })
}
</script>
<style >
.submit-form-option {
  display: none;
}
</style>
<style scoped>
.detail-form_main {
  min-height: 450px;
}
</style>
